<!-- 佣金排行榜 -->
<template>
  <s-layout title="佣金排行榜">
    <view class="CommissionRank">
      <view class="header">
        <view class="rank" v-if="state.position">
          您目前的排名
          <text class="num">{{ state.position }}</text> 名
        </view>
        <view class="rank" v-else>您目前暂无排名</view>
      </view>
      <view class="wrapper">
        <view class="nav acea-row row-around" style="justify-content: space-around; display: flex">
          <view
            class="item"
            :class="state.currentTab === index ? 'font-color' : ''"
            v-for="(item, index) in tabMaps"
            :key="index"
            @click="switchTap(index)"
          >
            {{ item }}
          </view>
        </view>
        <view class="list">
          <view
            class="item acea-row row-between-wrapper"
            v-for="(item, index) in state.rankList"
            :key="index"
          >
            <view class="num" v-if="index <= 2">
              <image :src="'/static/images/medal0' + (index + 1) + '.png'" />
            </view>
            <view class="num" v-else>
              {{ index + 1 }}
            </view>
            <view class="picTxt acea-row row-between-wrapper">
              <view class="pictrue">
                <image :src="item.avatar" />
              </view>
              <view class="text line1">{{ item.nickname }}</view>
            </view>
            <view class="people font-color">￥{{ fen2yuan(item.brokeragePrice) }}</view>
          </view>
        </view>
        <view
          class="noCommodity"
          v-if="state.rankList.length === 0 && (state.page !== 1 || state.active === 0)"
        >
          <emptyPage title="暂无排行～" />
        </view>
      </view>
    </view>
  </s-layout>
</template>

<script setup>
  import sheep from '@/sheep';
  import { onLoad } from '@dcloudio/uni-app';
  import { reactive } from 'vue';
  import BrokerageApi from '@/sheep/api/trade/brokerage';
  import { fen2yuan } from '@/sheep/hooks/useGoods';

  const tabMaps = ['周排行', '月排行'];

  const state = reactive({
    currentTab: 0,
    position: 0, // 排名
    rankList: [],
  });

  async function switchTap(index) {
    state.currentTab = index;
    state.rankList = [];
    calculateTimes();
    getBrokerageRankList();
    getBrokerageRankNumber();
  }

  async function getBrokerageRankList() {
    const { code, data } = await BrokerageApi.getBrokerageUserChildSummaryPageByPrice({
      pageNo: 1,
      pageSize: 10,
      'times[0]': state.times[0],
      'times[1]': state.times[1],
    });
    if (code !== 0) {
      return;
    }
    state.rankList = data.list;
  }

  async function getBrokerageRankNumber() {
    const { code, data } = await BrokerageApi.getRankByPrice({
      times: state.times,
    });
    if (code !== 0) {
      return;
    }
    state.position = data;
  }

  function formatDate(date) {
    return sheep.$helper.timeFormat(date, 'yyyy-mm-dd hh:MM:ss');
  }

  function calculateTimes() {
    let times;
    if (state.currentTab === 0) {
      times = getWeekTimes();
    } else {
      times = getMonthTimes();
    }
    state.times = [formatDate(times[0]), formatDate(times[1])];
  }

  onLoad(function () {
    calculateTimes();
    getBrokerageRankList();
    getBrokerageRankNumber();
  });

  // TODO 芋艿：此处可考虑抽离
  /**
   * 获得当前周的开始和结束时间
   */
  function getWeekTimes() {
    const today = new Date();
    const dayOfWeek = today.getDay();
    return [
      new Date(today.getFullYear(), today.getMonth(), today.getDate() - dayOfWeek, 0, 0, 0),
      new Date(
        today.getFullYear(),
        today.getMonth(),
        today.getDate() + (6 - dayOfWeek),
        23,
        59,
        59,
      ),
    ];
  }

  /**
   * 获得当前月的开始和结束时间
   */
  function getMonthTimes() {
    const today = new Date();
    const year = today.getFullYear();
    const month = today.getMonth();
    const startDate = new Date(year, month, 1, 0, 0, 0);
    const nextMonth = new Date(year, month + 1, 1);
    const endDate = new Date(nextMonth.getTime() - 1);
    return [startDate, endDate];
  }

  // TODO 芋艿：css 需要优化下；并且展示样式有问题
</script>
<style lang="scss" scoped>
  .CommissionRank .header {
    background: url('')
      no-repeat;
    width: 100%;
    height: 344rpx;
    background-size: 100% 100%;
  }

  .CommissionRank .header .rank {
    font-size: 33rpx;
    color: #fff;
    position: absolute;
    top: 160rpx;
    left: 48rpx;
  }

  .CommissionRank .header .rank .num {
    font-size: 51rpx;
    font-weight: bold;
    margin: 0 10rpx;
  }

  .CommissionRank .wrapper {
    width: 710rpx;
    background-color: #fff;
    border-radius: 14rpx;
    margin: -76rpx auto 0 auto;
  }

  .CommissionRank .wrapper .nav {
    height: 99rpx;
    border-bottom: 2.5rpx solid #f3f3f3;
    font-size: 30rpx;
    font-weight: bold;
    color: #999;
    line-height: 99rpx;
  }

  .CommissionRank .wrapper .nav .item.font-color {
    border-bottom: 4rpx solid #e93323;
    margin-top: -2rpx;
    color: #e93323;
  }

  .CommissionRank .wrapper .list {
    padding: 0 30rpx;
  }

  .CommissionRank .wrapper .list .item {
    border-bottom: 1px solid #f3f3f3;
    height: 101rpx;
    font-size: 28rpx;
  }

  .CommissionRank .wrapper .list .item .num {
    color: #666;
    width: 70rpx;
  }

  .CommissionRank .wrapper .list .item .num image {
    width: 34rpx;
    height: 40rpx;
    display: block;
  }

  .CommissionRank .wrapper .list .item .picTxt {
    width: 350rpx;
  }

  .CommissionRank .wrapper .list .item .picTxt .pictrue {
    width: 68rpx;
    height: 68rpx;
  }

  .CommissionRank .wrapper .list .item .picTxt .pictrue image {
    width: 100%;
    height: 100%;
    display: block;
    border-radius: 50%;
  }

  .CommissionRank .wrapper .list .item .picTxt .text {
    width: 262rpx;
    color: #333;
  }

  .CommissionRank .wrapper .list .item .people {
    width: 175rpx;
    text-align: right;
  }
</style>
